<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/material.css">
    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <title></title>

    <script type="text/javascript">
        $(function(){
	        $.ajax({
                url:"/api/v1/material/info",
                type:"GET",
                data:{},
                crossDomain: true, // 跨域，即不同域名、端口号可以访问
                contentType: 'application/json; charset=utf-8',  // 请求体数据格式 json字符串
                success:function(d){
                    //alert("ok")
                    if(d['status']==500){
                        alert(d['data']);
                    }
                    if(d['status']==200){
                        show(d['data']);
                    }
                },
			    error:function(){},
			    dataType:"json"
		    });
        });

        function show(data){
		    $.each(data,function (i,j){
				//每个用户的按钮id必须区分开
				$("#materialInfo").append("<tr><td>"+j['materialId']+"</td>"+"<td>"+j['materialName']+"</td>"+
                    
                    "<td>"+j['materialResidue']+"</td>"+"<td>"+j['rent']+"</td>"+"<td>"+j['remark']+"</td>"+
						"<td><button id='order"+i+"' type='button'>预约</button></td></tr>"
                        
                );
				
				
				
				$("#order"+i).click(function(){
                    window.open ("material_saveRent.html?materialId="+j['materialId'],
								"newwindow", "height=400px, width=400, top=200px, left=500px, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")&nbsp;

				});
				
				
			});
	    }

    </script>

</head>
<body>
    <div>
        <div class="functionLabel">
           器材模块-->查看所有器材信息<br><br>
           <input type="button" value="返回"  id=""><br><br>
        </div>
        <div class="listAllMaterial">
        
            <form action=""  >
        
                <table class="listAllMaterialTable">

                    <thead>

                        <tr>

                            <td>器材编号</td>
                            <td>器材名称</td>
                            <td>器材库存</td>
                            <td>租金</td>
                            <td>备注</td>
                            <td>操作</td>
            
                        </tr>

                    </thead>

                    <tbody id="materialInfo">

                    </tbody>

                </table>
        
            </form>
        </div>
    </div>
    
</body>
</html>